<!-- 医生页面：签约用户查询界面 -->
<template>
    <div class="MyContainer">

        <div class="mt-4">
            <span class="ml-3 w-20 text-gray-600 inline-flex items-center"> 用户名 </span>
            <el-input style="width: 300px" v-model="input" placeholder="请输入用户名" class="input-with-select">
                <template #append>
                    <el-button :icon="Search" @click="click_query(input)"/>
                </template>
            </el-input>
        </div>
        
        <div class="handle-box">
            <el-button type="primary" @click="exportXlsx"  size="large" style="float:  right;margin-top: 10px;">导出Excel</el-button>
        </div>

        <el-table :data="tableData" header-cell-class-name="table-header">
            <el-table-column prop="cusId" label="ID" width="55"></el-table-column>
            <el-table-column prop="cusName" label="姓名" width="115"></el-table-column>
            <!--<el-table-column prop="sex" label="性别" width="75"></el-table-column>-->
            <el-table-column prop="cusOld" label="年龄" width="75"></el-table-column>
            <el-table-column prop="cusPhonenum" label="电话" width="335"></el-table-column>
            <el-table-column prop="cusAddress" label="地址" ></el-table-column>
            <el-table-column prop="info" label="详细信息" fixed="right" width="200">
                <template #default="scope">
                    <el-button type="primary" @click="checkInfo(scope.row.cusId)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script setup lang="ts" name="contracted-user">
import { ref, watch } from 'vue';
import * as XLSX from 'xlsx';
import { Search } from '@element-plus/icons-vue'
import { getDocSignInfo } from '../api/manager';
import { useRouter,useRoute } from 'vue-router'

const router = useRouter()

const input = ref('')
interface TableItem {
    cusId: number;
    cusName: string;
    cusOld: string;
    cusPhonenum: string;
    cusAddress: string;
}

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = () => {
    getDocSignInfo().then(res =>{
        if(res.code == 200){//查询成功
            tableData.value = res.data
        }else{
            console.log("请求失败")
        }
    })
    .catch(err=>{
        console.log("查询失败",err)
    })
};
getData();

const click_query = (input) => {
    getDocSignInfo().then(res =>{
        if(res.code == 200){//查询成功
            //console.log(res)
            //tableData.value=undefined
            tableData.value=new Array()
            for(var i=0;i<res.data.length;i++){
                var cus=res.data[i]
                if(cus.cusName.includes(input)){
                    tableData.value.push({
                        cusId: cus.cusId,
                        cusName: cus.cusName,
                        cusOld: cus.cusOld,
                        cusPhonenum: cus.cusPhonenum,
                        cusAddress: cus.cusAddress,
                    })
                }
            }
            
        }else{
            console.log("请求失败")
        }
    })
    .catch(err=>{
        console.log("查询失败",err)
    })
}

function checkInfo(id){
    //console.log(id)
    router.push({path:'/BodyIndex',query: {id:id}})
    //window.location.replace('/BodyIndex')

}

const list = [['序号', '姓名','年龄','电话号码', '地址']];
const exportXlsx = () => {
    tableData.value.map((item: any, i: number) => {
        const arr: any[] = [i + 1];
        arr.push(...[item.cusId, item.cusName, item.cusOld, item.cusPhonenum, item.cusAddress]);
        list.push(arr);
    });
    let WorkSheet = XLSX.utils.aoa_to_sheet(list);
    let new_workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
    XLSX.writeFile(new_workbook, `表格.xlsx`);
};
</script>

<style scoped>
.mt-4 {
    float: left;
    margin-bottom: 30px;
}

</style>
